<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" scr="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
		<title>个人主页</title>
	</head>
	<body>
		<ul class="layui-nav">
			<li class="nav-item">个人中心</li>
		</ul>
		<br>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md3" class="layui-field-box">
				<div class="layui-card">
					<div class="layui-card-header layui-bg-blue">
						<span class="layui-icon layui-icon-about"></span> 个人信息
					</div>
					<div class="layui-card-body" align="center">
						<img class="layui-circle" src="img/myphoto.zp.jpg" style="width: 100px;height: 100px;" />
						<br>
						<label class="layui-bg-gray" style="font-size: 20px;padding-left: 20px;padding-right: 20px;">
							<code>魏&nbsp;琳&nbsp;轩</code>
						</label>
						<br>
						<div align="left">
							<span class="layui-icon layui-icon-location"></span>国籍：中国<br>
							<span class="layui-icon layui-icon-home"></span>地址：天津市南开区华苑路<br>
							<span class="layui-icon layui-icon-date"></span>出生日期：2000.3.29<br>
							<span class="layui-icon layui-icon-cellphone"></span>联系电话：17302278763<br>
							<span class="layui-icon layui-icon-chart"></span>Email:3022671179@qq.com<br>
						</div>
					</div>
				</div>
				<!-- 技术能力 -->
				<div class="layui-card">
					<div class="layui-card-header layui-bg-orange">
						<span class="layui-icon layui-icon-speaker"></span> 技术能力
					</div>
					<div class="layui-card-body">
						HTML5：
						<div class="layui-progress layui-progress-big" lay-showPercent="true">
							<div class="layui-progress-bar layui-bg-blue" lay-percent="30%"></div>
						</div> CSS:
						<div class="layui-progress layui-progress-big" lay-showPercent="true">
							<div class="layui-progress-bar layui-bg-green" lay-percent="10%"></div>
						</div> JS:
						<div class="layui-progress layui-progress-big" lay-showPercent="true">
							<div class="layui-progress-bar layui-bg-cyan" lay-percent="15%"></div>
						</div> C++:
						<div class="layui-progress layui-progress-big" lay-showPercent="true">
							<div class="layui-progress-bar layui-layer-nobg" lay-percent="5%"></div>
						</div> LAYUI：
						<div class="layui-progress layui-progress-big" lay-showPercent="true">
							<div class="layui-progress-bar layui-bg-red" lay-percent="35%"></div>
						</div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header layui-bg-green">
						<span class="layui-icon layui-icon-close"></span>请联系我
					</div>
					<div class="layui-card-body" align="left">
						<form class="layui-form">
							<div class="layui-form-item">
								<label class="layui-form-label"> Email:</label>
								<div class="layui-input-block">
									<input type="text" id="email" placeholder="请输入邮箱" class="layui-input"></input>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">内容：</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea" cols="50" rows="5" placeholder="请输入密码" class="layui-input"></textarea>
								</div>
							</div>
							<div class="layui-form-item" align="right">
								<a href="" class="layui-btn btn-success">
									<span class="layui-icon layui-circle"></span>提交
								</a>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="layui-col-md9">
				<div class="layui-elem-field">
					<h1>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人来自天津中德应用技术大学软件与通信学院,
						2018级学生，精通<code style="color: #00FF00;">HTML5</code>,CSS3,JavaScript等网页开发技术，熟练使用HBuilder,Git等开发工具。</h1><br><br>
					<div align="center">
						<a href="" class="layui-btn layui-btn-lg layui-bg-green">了解更多...</a>
					</div>
				</div>
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<div class="layui-colla-title">工作经验</div>
						<div class="layui-colla-content layui-show">
							<table class="layui-table" lay-even>
								<!-- 工作经历 -->
								<tr>
									<td>序号</td>
									<td>起止时间</td>
									<td>工作单位</td>
									<td>联系人</td>
									<td>备注</td>
								</tr>
								<tr>
									<td><input type="checkbox" id="idA"></td>
									<td>2011~2019</td>
									<td>中德应大</td>
									<td>魏琳轩</td>
									<td>173737373</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<div class="layui-colla-title">教育经历</div>
						<div class="layui-colla-content layui-show">
							<table class="layui-table" lay-even>
								<!-- 教育经历 -->
								<tr>
									<td>序号</td>
									<td>起止时间</td>
									<td>工作单位</td>
									<td>联系人</td>
									<td>备注</td>
								</tr>
								<tr>
									<td><input type="checkbox" id="idA"></td>
									<td>2011~2019</td>
									<td>中德应大</td>
									<td>魏琳轩</td>
									<td>173737373</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header">获奖证书</div>
					<div class="layui-card-body">
						<div class="layui-carousel" id="certify">
							<div carousel-item>
								<div><img style="width:100%;height:100%;" src="img/zhengshu1.jpg"></div>
								<div><img style="width:100%;height:100%;" src="img/zhengshu2.jpg"></div>
								<div><img style="width:100%;height:100%;" src="img/zhengshu3.jpg"></div>
								<div><img style="width:100%;height:100%;" src="img/zhengshu4.jpg"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<script>
				layui.use(['element','carousel'],function() {
					var element = layui.element;
					var carousel = layui.carousel;
					carousel.render({
						elem: '#certify',
						autoplay: true,
						width: '100%',
						interval: 2000,
						arrow: 'always',
						anim: 'default'
					})
				});
			</script>
	</body>
</html>
